<template>
	<div class="switchPage">
		<swiper ref="mySwiper" :modules="modules" v-if="deskOfPage.length > 0" style="height:100%;" :pagination="{ clickable: true }" :loop="true">
			<swiper-slide v-for="item in deskOfPage" :key="item.id">
				<IconGrid :gridData="item.gridData"/>
			</swiper-slide>
		</swiper>
		<DockBar :dockOfList="dockOfList"></DockBar>
	</div>
</template>

<script setup>
import $store from '../store/index'
import IconGrid from '../views/IconGrid.vue';
import { onMounted, onBeforeMount, computed } from 'vue';
import { Pagination } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue';
import DockBar from '../views/DockBar.vue'

// Import Swiper styles
import 'swiper/css'
import 'swiper/css/pagination'

const modules = [Pagination]

onMounted(() => {

});
onBeforeMount(() => {
	$store.commit('core/CORE_INIT');
});
const deskOfPage = computed(() => {
	return $store.state.core.deskOfPage;
});
const dockOfList = computed(() => {
	return $store.state.core.dockOfList;
});
</script>

<style>
.switchPage {
	position: absolute;
	width: 100%;
	height: 80%;
	top: 2%;
	left: 0;
	padding: 10px;
}
</style>
